<template>
  <div>
    <a-card :bordered="false">
      <a-tabs v-model="activeKey">
        <a-tab-pane key="0">
          <span slot="tab">
            <a-icon type="area-chart" />
            总览
          </span>
          <overview ref="overview" v-if="activeKey === '0'" @changeActiveKey="(v) => { activeKey = v }" />
        </a-tab-pane>

        <a-tab-pane key="1">
          <span slot="tab">
            <a-icon type="desktop" />
            数据中心
          </span>
          <Datacenter ref="datacenter" v-if="activeKey === '1'" />
        </a-tab-pane>

        <a-tab-pane key="2">
          <span slot="tab">
            <a-icon type="hdd" />
            L1层：基础设施
          </span>
          <device ref="device" v-if="activeKey === '2'" />
        </a-tab-pane>

        <a-tab-pane key="3">
          <span slot="tab">
            <a-icon type="cluster" />
            L2层：IT设备
          </span>
          <equipment ref="equipment" v-if="activeKey === '3'" />
        </a-tab-pane>

        <a-tab-pane key="4">
          <span slot="tab">
            <a-icon type="hdd" />
            L3层：云平台资源
          </span>
          <node ref="node" v-if="activeKey === '4'" />
        </a-tab-pane>

        <a-tab-pane key="5">
          <span slot="tab">
            <a-icon type="star" />
            L4层：应用资源
          </span>
          <app ref="app" v-if="activeKey === '5'" />
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script>
  import Datacenter from './Datacenter'
  import Device from './Device'
  import Equipment from './Equipment'
  import Node from './Node'
  import App from './App'
  import Overview from './Overview'

  export default {
    name: 'F010102',
    components: {
      Datacenter,
      Device,
      Equipment,
      Node,
      App,
      Overview
    },
    data() {
      return {
        activeKey: '0',
      }
    },
    created() {},
    methods: {
      handleTabChange() {
        let key = this.activeKey;
        if (key === '0' && this.$refs.overview) {
          this.$refs.overview.loadDatacenterList();
        } else if (key === '1' && this.$refs.datacenter) {
          this.$refs.datacenter.loadData();
        } else if (key === '2' && this.$refs.device) {
          this.$refs.device.loadData();
        } else if (key === '3' && this.$refs.equipment) {
          this.$refs.equipment.loadData();
        } else if (key === '4' && this.$refs.node) {
          this.$refs.node.loadData();
        } else if (key === '5' && this.$refs.app) {
          this.$refs.app.loadData();
        }
      },
    },
  }
</script>